<!-- 热门楼寻组件 -->
<template>
  <div>
    <p class="title">热门楼讯 >></p>
    <div class="box">
      <div class="boxItem">
        <HotLeft :img="img" :title="title" :href="href" />
        <div class="right">
          <HotRight id="rightItem" v-for="item in hotRightList" :key="item.id" :img="item.img"
            :title="item.title" :href="item.href" />
        </div>
      </div>
      <div class="point">
        <a id="smPoint" v-for="item in hotLeftList" :key="item.id" href="javascript:;"
          @click="choose(item.id)"></a>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from 'vue'
import HotLeft from '@/components/firstBody/HotLeft.vue'
import HotRight from '@/components/firstBody/HotRight.vue'
export default defineComponent({
  components: {
    HotLeft,
    HotRight
  },
  setup () {
    // 当前正在浏览的页数
    const readIndex = ref(1)
    const hotLeftList = ref([
      {
        id: 1,
        img: '',
        title: '中绿蔚蓝湾｜营销中心暨展示区 盛大开业',
        href: 'javaScript:;'
      }
    ]
    )
    const hotRightList = ref([
      {
        id: 1,
        img: '',
        title: '中绿蔚蓝湾｜营销中心暨展示区 盛大开业',
        href: 'javaScript:;'
      },
      {
        id: 2,
        img: '',
        title: '中绿蔚蓝湾｜营销中心暨展示区 盛大开业',
        href: 'javaScript:;'
      },
      {
        id: 3,
        img: '',
        title: '中绿蔚蓝湾｜营销中心暨展示区 盛大开业',
        href: 'javaScript:;'
      },
      {
        id: 4,
        img: '',
        title: '中绿蔚蓝湾｜营销中心暨展示区 盛大开业',
        href: 'javaScript:;'
      }
    ])
    // 热门楼讯底部小圆点点击事件
    const choose = (id) => {
      const point = document.querySelectorAll('#smPoint')
      console.log(point)
      point.forEach((item, index) => {
        console.log(index)
        console.log(id)
        if ((index + 1) !== id) {
          item.className = ''
        } else {
          item.className = 'smPoint'
          readIndex.value = id
        }
      })
    }
    onMounted(() => {
      choose(1)
    })
    return {
      hotLeftList,
      hotRightList,
      readIndex,
      choose
    }
  }
})
</script>

<style lang='less' scoped>
.title {
  margin-left: 20px;
  margin-top: 42px;
  margin-bottom: 10px;
  font-family: 'HarmonyOS Sans SC';
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  color: #3072f6;
}
.box {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 867px;
  height: 467px;
  margin-right: 25px;
  border: 1px solid #ededed;
  .boxItem {
    display: flex;
    padding: 20px;
    .right {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
    }
  }
  .point {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 8px;
    a {
      display: block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(147, 153, 165, 0.4);
    }
    .smPoint {
      background-color: #3072f6;
    }
  }
}
</style>
